<template>
    <div v-if="ana">
        <el-descriptions title="问卷收回分析" :column="2" :size="size" border style="margin-top: 20px;">
            <template #title>
                <h1 class="title">问卷收回分析</h1>
            </template>
            <el-descriptions-item label="ID">
                {{ ana.id }}
            </el-descriptions-item>
            <el-descriptions-item label="分发任务名称">
                {{ ana.title }}
            </el-descriptions-item>
            <el-descriptions-item label="用户群组">
                {{ ana.userGroupIdList }}
            </el-descriptions-item>
            <el-descriptions-item label="问卷">
                {{ ana.questionnaireIdList }}
            </el-descriptions-item>
            <el-descriptions-item label="任务发布账号">
                {{ ana.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="任务发布昵称">
                {{ ana.nickName }}
            </el-descriptions-item>
            <el-descriptions-item label="开始分发时间">
                {{ ana.startTime }}
            </el-descriptions-item>
            <el-descriptions-item label="结束分发时间">
                {{ ana.endTime }}
            </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top:20px">
            <h1 class="title">测评记录集合</h1>
            <el-tabs type="border-card">
                <el-tab-pane :label="qn.title" v-for="qn in ana.qnListData">
                    <el-card style="margin:10px 0px;background-color: #0072db;">
                        <el-link target="_blank" :href="`/doQN/${qn.id}?distributeTaskId=${ana.id}`"
                            style="color:#fff;font-weight: 900">
                            <el-icon>
                                <Link />
                            </el-icon> 该任务中问卷分享地址
                        </el-link>
                    </el-card>
                    <div v-if="ana.qnRecordListData.filter((i) => { return i.questionnaireId == qn.id }).length > 0">
                        <el-table  table-layout='auto'       :data="ana.qnRecordListData.filter((i) => { return i.questionnaireId == qn.id })">
                            <el-table-column prop="id" label="ID" width="80"></el-table-column>
                            <el-table-column prop="record.title" label="问卷名称" width="200"></el-table-column>
                            <el-table-column label="测评人">
                                <template #default="scope">
                                    <div style="display: flex;">
                                        <el-avatar :size="20"
                                            :src="imgBaseURL + scope.row.avatar" />
                                        <div> {{ scope.row.nickName }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="完成时间" width="200"></el-table-column>
                            <el-table-column label="分数" width="160">
                                <template #default="scope">
                                    {{ scope.row.report.score || 60 }}
                                    <el-tag v-if="scope.row.report.score || 60 < 60" type="danger">重点关注</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template #default="scope">
                                    <el-button type="primary" text size="small"
                                        @click="() => { this.$router.push(`/reviewQNRecord/${scope.row.id}`) }">查看</el-button>
                                    <el-button type="primary" text size="small" :disabled="scope.row.status == 0"
                                        @click="() => { this.$router.push(`/reportQN/${scope.row.id}`) }">报告</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-empty v-else description="目前还没有人完成测评哦~"></el-empty>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            form: { id: "" },
            ana: null,
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL
        }
    },
    methods: {
        async getDTByID() {
            let rs = await POST('/distributeTask/getDTByID', 'POST', this.form, false, null, false)
            console.log("查询结果:::", rs)
            this.ana = rs.data
        },
    },
    mounted() {
        let id = this.$route.params.id || null
        if (id) {
            this.form.id = id
            this.getDTByID()
        }
    }
}
</script>
<style></style>